<template>
    <view class="container">
         <view class="header">
             <view class="list">
                 <view class="left">
                     <view class="title">欢迎使用</view>
                     <view class="small-title">防伪查询小程序</view>
                 </view>
 
                 <view class="right" @click="ToBusiness" v-if="Object.getOwnPropertyNames(business).length > 0">
                     <image
                         :src="business.avatar_cdn"
                     />
                     {{ business.nickname }}
                 </view>
 
                 <view class="right" @click="ToBusiness" v-else>
                     <image
                         src="/static/images/user-circle.png"
                     />
                     登录
                 </view>
             </view>
 
             <view class="validate-input">
                 <uv-input
                     :placeholder="placeholderText"
                     v-model="code"
                 >
                     <!-- #ifndef WEB -->
                         <template #suffix>
                             <uv-icon size="28" name="scan" @click="OnScanCode"></uv-icon>
                         </template>
                     <!-- #endif -->
                 </uv-input>
             </view>
         </view>
 
         <view class="validate">
             <uv-button :customStyle="validateBtn" :plain="true" text="开始验证" @click="OnValidate"></uv-button>
         </view>
    </view>
 </template>
 
 <script setup>
 const { proxy } = getCurrentInstance();
 
const placeholderText = ref(process.env.UNI_PLATFORM === 'web' ? '请输入防伪码' : '请输入防伪码或者扫防伪码');
 
 const validateBtn = reactive({
     width:'100%',
     height:'100%',
     background: 'transparent',
     color:'#fff'
 });
 
 const business = proxy.$business;
 const code = ref('');
 
 const OnValidate = () =>
 {
     uni.navigateTo({
         url:`/pages/validate/info?code=${code.value}`
     });
 }
 
 const OnScanCode = () =>
 {
     uni.scanCode({
         success: (res) =>
         {
            console.log(res);

             if(res?.path)
             {
                 uni.navigateTo({
                    url:res.path 
                 });
             }
         },
         fail:(err) =>
         {
             console.log(err);

         },
         complete:(e) =>
         {
            console.log(e);
         }


     });
 }
 
 const ToBusiness = () =>
 {
     // 保留当前页面，跳转应用内某个页面
     uni.navigateTo({
         url: '/pages/business/index'
     });
 }
 </script>
 
 <style>
 .header {
     height: 90vw;
     background: linear-gradient(to right, #33ccff 0%, #91cbf8 100%);
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     padding-top: 10vh;
 }
 
 .header .list {
     color: #fff;
     display: flex;
     justify-content: space-between;
 }
 
 .header .list .left {
     margin-left: 20px;
 }
 
 .header .list .left .title {
     margin-bottom: 10px;
 }
 
 .header .list .right {
     display: flex;
     align-items: center;
     background-color: #fff;
     padding: 0 5px 0 10px;
     color: #469eff;
     font-size: 12px;
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
     height: 35px;
 }
 
 .header .list .right image {
     width: 20px;
     height: 20px;
     margin-right: 10px;
     border-radius: 50%;
     object-fit: cover;
 }
 
 .header .validate-input {
     width: 80%;
     background: #fff;
     border-radius: 10px;
     overflow: hidden;
     margin: 0 auto;
     margin-top: 20vw;
 }
 
 .validate {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;
     background: #2879fc;
     margin: 0 auto;
     margin-top: -50px;
     box-shadow: 0px 0px 10px 10px #eee;
 }
 
 :deep(.uv-button-wrapper) {
     height: 100%;
 }
 </style>